<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8" />
        <title>Form - ESF Demo</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/site.css" />
        <!--[if lt IE 9]>
        <link rel="stylesheet" href="../legacy/ie8-compatible.css" />
        <![endif]-->
        <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
    </head>
    <body>
        <div id="layout" class="ui-g">
            <div class="ui-u-1-5">
                <ul id="navigator-features" class="ui-list-unstyled">
                    <li><a href="#form-inline">单行表单（Inline Form）</a></li>
                    <li><a href="#form-horizontal">横向表单（Horizontal Form）</a></li>
                    <li><a href="#form-stacked">堆叠表单（Stacked Form）</a></li>
                    <li><a href="#form-fieldset">字段组合（FieldSet）</a></li>
                    <li><a href="#form-readonly">只读字段</a></li>
                </ul>
            </div>
            <div class="ui-u-4-5">
                <div id="main-header">
                    <h1>表单（Form）</h1>
                    <hr />
                    <p>
                        表单布局。
                    </p>
                </div>

                <div id="main" class="content">
                    <h2 id="form-inline">单行表单（Inline Form）</h2>
                    <div class="example">
                        <h3>With Label</h3>
                        <form class="ui-form">
                            <div class="ui-form-row">
                                <div class="ui-form-field">
                                    <div class="ui-form-key ui-form-required">
                                        <label for="email">邮箱：</label>
                                    </div>
                                    <div class="ui-form-value ui-form-wrap-hint">
                                        <div class="ui-textbox">
                                            <input placeholder="邮箱" type="email" id="email" />
                                        </div>
                                        <label class="ui-form-hint">输入邮箱</label>
                                    </div>
                                </div>
                                <div class="ui-form-field">
                                    <div class="ui-form-key">
                                        <label for="password">密码：</label>
                                    </div>
                                    <div class="ui-form-value ui-form-wrap-hint">
                                        <div class="ui-textbox">
                                            <input placeholder="密码" type="password" id="password" />
                                        </div>
                                        <label class="ui-form-hint">输入密码</label>
                                    </div>
                                </div>
                                <div class="ui-form-field">
                                    <div class="ui-form-value ui-form-valign">
                                        <div class="ui-checkbox-custom">
                                            <input id="remember" type="checkbox" />
                                            <label for="remember">记住账户</label>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="ui-button">登录</button>
                            </div>
                        </form>

                        <h3>Without Label</h3>
                        <form class="ui-form">
                            <div class="ui-form-row">
                                <div class="ui-form-value">
                                    <div class="ui-textbox">
                                        <input placeholder="邮箱" type="email" id="email2" />
                                    </div>
                                </div>
                                <div class="ui-form-value">
                                    <div class="ui-textbox">
                                        <input placeholder="密码" type="password" id="password2" />
                                    </div>
                                </div>
                                <div class="ui-form-value ui-form-valign">
                                    <div class="ui-checkbox-custom">
                                        <input id="remember2" type="checkbox" />
                                        <label for="remember2">记住账户</label>
                                    </div>
                                </div>
                                <button type="submit" class="ui-button">登录</button>
                            </div>
                        </form>
                    </div>

                    <h2 id="form-horizontal">横向表单（Horizontal Form）</h2>
                    <div class="example">
                        <h3>提示信息折行</h3>
                        <form class="ui-form ui-form-wrap-hint">
                            <div class="ui-form-row">
                                <div class="ui-form-key ui-form-required"><label for="email3">邮箱：</label></div>
                                <div class="ui-form-value">
                                    <div class="ui-textbox">
                                        <input placeholder="邮箱" type="email" id="email3" />
                                    </div>
                                    <label class="ui-form-hint">输入用户名，提示信息可以在第二行</label>
                                </div>
                            </div>
                            <div class="ui-form-row">
                                <div class="ui-form-key ui-form-required">
                                    <label for="password3">密码：</label>
                                </div>
                                <div class="ui-form-value">
                                    <div class="ui-textbox">
                                        <input placeholder="密码" type="password" id="password3" />
                                    </div>
                                    <label class="ui-form-hint">输入密码</label>
                                </div>
                            </div>
                            <div class="ui-form-row">
                                <div class="ui-form-key">
                                    <label>性别：</label>
                                </div>
                                <div class="ui-form-value">
                                    <label class="ui-select-custom">
                                        <select>
                                            <option value="male">男</option>
                                            <option value="female">女</option>
                                            <option value="none">不知道性别请登录www.baidu.com搜索：性别如何测试</option>
                                        </select>
                                    </label>
                                </div>
                            </div>
                            <div class="ui-form-row">
                                <div class="ui-form-key">
                                    <label>国家：</label>
                                </div>
                                <div class="ui-form-value">
                                    <label class="ui-select-custom">
                                        <select>
                                            <option value="male">美帝</option>
                                            <option value="female">欧帝</option>
                                            <option value="none">天朝</option>
                                        </select>
                                    </label>
                                </div>
                            </div>
                            <div class="ui-form-buttons">
                                <button type="submit" class="ui-button ui-button-primary">提交</button>
                                <button type="button" class="ui-button ui-button-link">返回</button>
                            </div>
                        </form>

                        <h2>提示信息不折行</h2>
                        <form class="ui-form">
                            <div class="ui-form-row">
                                <div class="ui-form-key ui-form-required"><label for="email4">邮箱：</label></div>
                                <div class="ui-form-value">
                                    <div class="ui-textbox">
                                        <input placeholder="邮箱" type="email" id="email4" />
                                    </div>
                                    <label class="ui-form-hint">输入用户名</label>
                                </div>
                            </div>
                            <div class="ui-form-row">
                                <div class="ui-form-key ui-form-required">
                                    <label for="password4">密码：</label>
                                </div>
                                <div class="ui-form-value">
                                    <div class="ui-textbox">
                                        <input placeholder="密码" type="password" id="password4" />
                                    </div>
                                    <label class="ui-form-hint">输入密码</label>
                                </div>
                            </div>
                            <div class="ui-form-row">
                                <div class="ui-form-key">
                                    <label>性别：</label>
                                </div>
                                <div class="ui-form-value">
                                    <label class="ui-select-custom">
                                        <select>
                                            <option value="male">男</option>
                                            <option value="female">女</option>
                                            <option value="none">不知道性别请登录www.baidu.com搜索：性别如何测试</option>
                                        </select>
                                    </label>
                                </div>
                            </div>
                            <div class="ui-form-row">
                                <div class="ui-form-key">
                                    <label>国家：</label>
                                </div>
                                <div class="ui-form-value">
                                    <label class="ui-select-custom ui-disabled">
                                        <select disabled>
                                            <option value="male">美帝</option>
                                            <option value="female">欧帝</option>
                                            <option value="none">天朝</option>
                                        </select>
                                    </label>
                                </div>
                            </div>
                            <div class="ui-form-row">
                                <div class="ui-checkbox-custom">
                                    <input id="remember4" type="checkbox" />
                                    <label for="remember4">记住账户</label>
                                </div>
                            </div>
                            <div class="ui-form-buttons">
                                <button type="submit" class="ui-button ui-button-success">提交</button>
                                <button type="button" class="ui-button">返回</button>
                            </div>
                        </form>
                    </div>

                    <h2 id="form-stacked">堆叠表单（Stacked Form）</h2>
                    <div class="example">
                        <form class="ui-form ui-form-stack ui-form-wrap-hint" style="width: 500px">
                            <div class="ui-form-row">
                                <div class="ui-form-field">
                                    <label class="ui-form-key ui-form-required" for="firstName">Name</label>
                                    <div class="ui-form-field">
                                        <div class="ui-form-value">
                                            <div class="ui-textbox ui-textbox-width-size4">
                                                <input placeholder="First Name" type="text" id="first-name" />
                                            </div>
                                            <label class="ui-form-hint">Your first name</label>
                                        </div>
                                    </div>
                                    <div class="ui-form-field">
                                        <div class="ui-form-value">
                                            <div class="ui-textbox ui-textbox-width-size4">
                                                <input placeholder="Last Name" type="text" id="last-name" />
                                            </div>
                                            <label class="ui-form-hint">Your last name</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="ui-form-row">
                                <label class="ui-form-key" for="address">Address</label>
                                <div class="ui-form-value">
                                    <div class="ui-textbox ui-textbox-width-size8">
                                        <input placeholder="密码" type="text" id="address" />
                                    </div>
                                </div>
                            </div>
                            <div class="ui-form-buttons">
                                <button type="submit" class="ui-button">登录</button>
                            </div>
                        </form>
                    </div>

                    <h2 id="form-fieldset">Field Set</h2>
                    <div class="example">
                        <form class="ui-form ui-form-stack ui-form-wrap-hint" style="width: 500px">
                            <fieldset>
                                <legend>Personal Details </legend>
                                <div class="ui-form-row">
                                    <div class="ui-form-field">
                                        <label class="ui-form-key ui-form-required">Name</label>
                                        <div class="ui-form-field">
                                            <div class="ui-form-value">
                                                <div class="ui-textbox ui-textbox-width-size4">
                                                    <input placeholder="First Name" type="text" id="first-name2" />
                                                </div>
                                                <label class="ui-form-hint">Your first name</label>
                                            </div>
                                        </div>
                                        <div class="ui-form-field">
                                            <div class="ui-form-value">
                                                <div class="ui-textbox ui-textbox-width-size4">
                                                    <input placeholder="Last Name" type="text" id="last-name2" />
                                                </div>
                                                <label class="ui-form-hint">Your last name</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ui-form-row">
                                    <label class="ui-form-key">Address</label>
                                    <div class="ui-form-value">
                                        <div class="ui-textbox ui-textbox-width-size8">
                                            <input placeholder="密码" type="text" id="address2" />
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend>Home Address</legend>
                                <div class="ui-form-row">
                                    <div class="ui-form-field">
                                        <label class="ui-form-key ui-form-required">Name</label>
                                        <div class="ui-form-field">
                                            <div class="ui-form-value">
                                                <div class="ui-textbox ui-textbox-width-size4">
                                                    <input placeholder="First Name" type="text" id="first-name3" />
                                                </div>
                                                <label class="ui-form-hint">Your first name</label>
                                            </div>
                                        </div>
                                        <div class="ui-form-field">
                                            <div class="ui-form-value">
                                                <div class="ui-textbox ui-textbox-width-size4">
                                                    <input placeholder="Last Name" type="text" id="last-name3" />
                                                </div>
                                                <label class="ui-form-hint">Your last name</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ui-form-row">
                                    <label class="ui-form-key">Address</label>
                                    <div class="ui-form-value">
                                        <div class="ui-textbox ui-textbox-width-size8">
                                            <input placeholder="密码" type="text" id="address3" />
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <div class="ui-form-buttons">
                                <button type="submit" class="ui-button">登录</button>
                            </div>
                        </form>
                    </div>

                    <h2 id="form-readonly">Readonly</h2>
                    <div class="example">
                        <form class="ui-form">
                            <div>
                                <div class="ui-form-field">
                                    <label class="ui-form-key">Brief:</label>
                                    <div class="ui-form-value ui-form-valign">
                                        <span>客户名称</span> <a href="#" class="ui-link-plain ui-icon-pencil ui-text-primary"></a>
                                    </div>
                                </div>
                                <div class="ui-form-field-delimiter"></div>
                                <div class="ui-form-field ui-form-field-lspace">
                                    <label class="ui-form-key">Brief:</label>
                                    <div class="ui-form-value ui-form-valign">
                                        <span>客户名称</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="ui-form-field">
                                    <label class="ui-form-key">ID:</label>
                                    <div class="ui-form-value ui-form-valign">
                                        <span>123456</span>
                                    </div>
                                </div>
                                <div class="ui-form-field-delimiter-border"></div>
                                <div class="ui-form-field">
                                    <label class="ui-form-key">预算:</label>
                                    <div class="ui-form-value ui-form-valign">
                                        <span class="ui-text-warning">123456</span>
                                    </div>
                                </div>
                                <div class="ui-form-field-delimiter-border"></div>
                                <div class="ui-form-field">
                                    <label class="ui-form-key">进度:</label>
                                    <div class="ui-form-value ui-form-valign">
                                        <div class="ui-progress ui-progress-mini" style="width: 100px;display: inline-block;">
                                            <div class="ui-progress-bar ui-progress-bar-success" style="width: 20%;"></div>
                                            <div class="ui-progress-marker" style="left: 50%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script src="assets/google-code-prettify/prettify.js"></script>
        <script src="assets/jquery-1.11.1.min.js"></script>
        <script src="assets/demo.js"></script>
    </body>
</html>
